<template>
	<div class="fp-password">
		<div :class="seen?'fp-steps-web':'fp-steps-tel'">
			<el-row>
				<el-col>
					<el-steps :active="active">
						<el-step title="账号信息" icon="el-icon-user-solid"></el-step>
						<el-step title="密码重置" icon="el-icon-unlock"></el-step>
						<el-step title="完成" icon="el-icon-success"></el-step>
					</el-steps>
				</el-col>
			</el-row>
		</div>
		<div class="step-detail">
			<el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">
				<el-row class="col-zhxx">
					<el-col v-if="active == 0">账号信息</el-col>
					<el-col v-if="active == 1">重置密码</el-col>
				</el-row>
				<el-row class="col-dlzh">
					<el-col v-if="active == 0">输入您的登录账号</el-col>
					<el-col v-if="active == 1">输入新的密码信息</el-col>
				</el-row>
				<el-row>
					<el-col v-if="active == 0">
						<el-form-item class="col-emil" label="登录账号" prop="email">
							<el-input placeholder="请输入登录账号" v-model="ruleForm.email"></el-input>
						</el-form-item>
						<el-form-item  class="col-emil col-sty" label="验证码" prop="code">
							<el-input placeholder="请输入内容" v-model="ruleForm.code" class="input-with-select">
							    <el-button :disabled="disabled" @click="sendEmailCode" slot="append">
									<span v-if="!isDisabledCountDown">获取验证码</span>
									<span v-if="isDisabledCountDown">{{countDown}}</span>
								</el-button>
							</el-input>
						</el-form-item>
					</el-col>
					<el-col v-if="active == 1">
						<el-form-item class="col-emil" label="新密码" prop="password">
							<el-input type="password" v-model="ruleForm.password" autocomplete="off"></el-input>
						</el-form-item>
						<el-form-item class="col-emil col-sty" label="确认密码" prop="checkPass">
							<el-input type="password" v-model="ruleForm.checkPass" autocomplete="off"></el-input>
						</el-form-item>
					</el-col>
					
					<el-col v-if="active == 3" style="margin-top: -40px;">
						<el-result icon="success" title="密码重置成功" subTitle="请根据提示进行操作">
						      <template slot="extra">
						        <el-button type="primary" size="medium" @click="toHome">返回首页</el-button>
						      </template>
						</el-result>
					</el-col>
				</el-row>
				<el-row class="btn-xyb">
					<el-col>
						<el-form-item class="col-emil">
							<el-button type="info" v-if="active == 1" round @click="stepBack(active)">上一步</el-button>
							<el-button type="primary" v-if="active == 0"  round @click="stepForm('ruleForm', active)">下一步</el-button>
							<el-button type="primary" v-if="active == 1"  round @click="forgotPassword">提交</el-button>
						</el-form-item>
					</el-col>
				</el-row>
			</el-form>
		</div>
	</div>
</template>
<script>
	import axios from "axios";
	import Vue from 'vue'
	import {baseUrl} from '../utils/global.js'
	export default {
		name: 'ForgetPassword',
		data() {
			var validatePass2 = (rule, value, callback) => {
				if (value === '') {
				  callback(new Error('请再次输入密码'));
				} else if (value !== this.ruleForm.password) {
				  callback(new Error('两次输入密码不一致!'));
				} else {
				  callback();
				}
			};
			return {
				active: 0,
				seen: true,
				disabled: false, // 按钮是否可用
				countDown: 60, // 倒计时时间（单位：秒）
				isDisabledCountDown: false, // 是否开启倒计时
				ruleForm: {
					email: "",
					code: "",
					password: "",
					checkPass: "",
				},
				rules: {
					email: [
						{ required: true, message: '请输入邮箱地址', trigger: 'blur' },
						{ type: 'email', message: '请输入正确的邮箱地址', trigger: ['blur', 'change'] }
					],
					code: [
						{ required: true, message: '请输入验证码', trigger: 'blur' },
						{ min: 6, max: 6, message: '验证码长度6个字符', trigger: 'blur' }
					],
					password: [
						{ required: true, message: '请输入新密码', trigger: 'blur' },
						{ min: 6, max: 30, message: '密码长度在 6 到 30 个字符', trigger: 'blur' }
					],
					checkPass: [
						{ required: true, validator: validatePass2, trigger: 'blur' }
					],
				}
			}
		},
		methods: {
			/* 去首页 */
			toHome(){
				this.$router.push({
					name: "Index"
				});
			},
			stepForm(formName, active) {
				this.$refs[formName].validate((valid) => {
					if (valid) {
						switch (active){
							case 0:
								this.active = 1
								break;
							case 1:
								this.active = 2
								break;
						}
						
					} else {
						return false;
					}
				});
			},
			/* 上一步 */
			stepBack(active){
				switch (active){
					case 1:
						this.active = 0
						break;
					case 2:
						this.active = 1
						break;
				}
			},
			menuSeen(){
			    // 屏幕尺寸
			    let screenHeight=document.body.clientWidth;
			    if(screenHeight>415){
			        this.seen=true;
			    }else{
			        this.seen=false;
			    }
			},
			/* 按钮倒计时 */
			startCountDown() {
			    let timer = setInterval(() => {
			      if (this.countDown > 0) {
			        this.countDown--;
			      } else {
			        clearInterval(timer);
			        this.disabled = false; // 启用按钮
					this.isDisabledCountDown = false;
			        this.countDown = 60; // 重置倒计时时间
			      }
			    }, 1000);
			},
			/* 发送验证码 */
			sendEmailCode(){
				
				if(this.ruleForm.email==""){
					this.$message.error("邮箱不能为空");
					return
				} else {
					const mailReg = /^([a-zA-Z0-9_-])+@([a-zA-Z0-9_-])+(.[a-zA-Z0-9_-])+/;
					if (!mailReg.test(this.ruleForm.email)) {
						this.$message.error("邮箱格式不正确")
						return
					}
				}
				this.disabled = true
				axios.get(baseUrl + "/user/forgot/send_code", {
					params: { email: this.ruleForm.email }
				}).then(res => {
					if(res.status == 200){
						this.$message({
						message: "验证码发送成功",
						type: "success",
						duration: 1500,
						});
						this.isDisabledCountDown = true
						this.startCountDown()
					}
				})
				.catch(res => {
				  this.$message.error(res.response.data.detail);
				  this.disabled = false; // 禁用按钮
				});
				
			},
			/* 重置密码 */
			forgotPassword(formName){
				/* let data = new FormData();
				data.append('email', this.registForm.email);
				data.append('code', this.registForm.email);
				data.append('password', this.registForm.password); */
				axios.post(baseUrl + "/user/forgot_password/", this.ruleForm)
				.then((res) => {
					if(res.status == 200){
						this.active = 3;
					}
				})
				.catch((res) => {
					this.$message.error(res.response.data.detail)
				});
			},
			
		},
		mounted() {
		    this.menuSeen()
		},
	}
</script>

<style scoped>
	@import '../../static/css/ForgetPassword.css'
</style>
